<template>
    <div class="relative grid grid-cols-5 overflow-hidden text-xs text-gray-100">
        <div class="relative col-span-2 px-4 py-2 bg-[#6879f0] grow shrink-0">
            <div class="relative z-10 mr-6">
                <div>当前价</div>
                <div class="mt-1 ">
                    <span>¥</span>
                    <span class="ml-1 text-2xl">108</span>
                </div>
            </div>
            <div class="absolute top-1 w-24 h-24 rotate-[30deg] left-full -translate-x-1/4 bg-[#e56c69]"></div>
            <div class="absolute z-0 w-12 h-12 rotate-45 bg-white/10 -top-6 left-6"></div>
            <div class="absolute z-0 w-4 h-4 rotate-45 bg-white/10 top-4 -left-2"></div>
            <div class="absolute z-0 w-3 h-3 rotate-45 bg-white/10 top-12 left-2"></div>
        </div>

        <div class="relative flex items-center justify-between col-span-3 py-2 pr-2 bg-[#e56c69] grow shrink-0">
            
            <div class="relative z-10 h-full">
                <div>秒杀价</div>
                <div class="mt-1 ">
                    <span>¥</span>
                    <span class="ml-1 text-2xl">108</span>
                </div>
            </div>
            <div class="relative z-10 h-full text-right">
                <div>15 点场</div>
                <div class="mt-1">
                    <span class="text-gray-200">即将开始</span>
                    <span class="ml-2 text-lg">03 : 23</span>
                </div>
            </div>
            <div class="absolute z-0 w-12 h-12 rotate-45 -translate-x-1/2 bg-white/10 -top-6 left-1/2"></div>
            <div class="absolute z-0 w-4 h-4 rotate-45 bg-white/10 top-4 left-1/4"></div>
            <div class="absolute z-0 w-4 h-4 rotate-45 bg-white/10 bottom-2 left-3/4"></div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>

</script>
    
<style></style>